
export function barChartFun(data, chartsId) {
    let barCharts = echarts.init(document.getElementById(chartsId));
    let seriesData = (data.yData || []).map((item, index) => {
      return {
          name: item.name || '',
          type: 'bar',
          barWidth: data.barWidth || '16px',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: item.color[0]},
              { offset: 0.6, color: item.color[1]},
              { offset: 1, color: item.color[2]}
            ])
          },
          data: item.value || [],
      };
    });
      
    let barChartsOption = {
        title: {
          text: data.title,
          left: "left",
          textStyle: {
            color: "#2C2C2C",
            fontSize: 16,
          },
        },
        tooltip: {
            trigger: "axis",
            color: "#000",
            extraCssText:
              "box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px  rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05)", // 边框阴影是这里设置才生效
            backgroundColor: "#fff",
            textStyle: {
              color: "#000",
            },
            transitionDuration: 0,
            formatter: "{b} <br/>{a} : " + data.unit,
        },
        grid: {
            top: data.gridTop ? data.gridTop : '14%',
            left: '2%',
            right: '2%',
            bottom: '2%',
            containLabel: true,
        },
        legend: {
            show: true,
            left: data.legendLeft ? data.legendLeft : '14%',
            textStyle: {
                fontSize: 14,
                color: "#333",
            },
            itemWidth: 16,
            itemHeight: 10,
            itemGap: 42,
        },
        xAxis: {
            type: 'category',
            data: data.xData,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#E9EFF4',
                    width: 1,
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#666666', //X轴文字颜色
                    fontSize: 12
                },
            },
        },
        yAxis: {
            type: "value",
            name: data.yData[0].unit,
            splitLine: {
                show: true,
                lineStyle: {
                    type: "dotted",
                    color: "#E9EFF4",
                    type: [6, 3],
                    dashOffset: 2,
                },
            },
            axisLabel: {
                padding: [0, 5, 0, 0],
                fontSize: 12,
                textStyle: {
                    color: "#666666",
                    fontFamily: "Microsoft YaHei",
                },
            },
        },
        series: seriesData,
    };
    barCharts.setOption(barChartsOption, true);
    return barCharts
}
